<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>安捷策略Demo</title>
    <link rel="stylesheet" th:href="@{/css/normalize.css}">
    <link rel="stylesheet" th:href="@{/css/idea1.css}">

</head>
<body style="background-color: #040c1f;">

<!--头部开始-->
<div class="top">
    <h2>安捷能源预测</h2>
</div>
<!--头部结束-->

<!-- 中间开始-->
<div class="middle">
    <div class="middle_left">
        <div class="triangle"></div>
        <!--        <div class="triangle1"></div>-->
        <div class="para">
            <span class="text">供给侧</span>
        </div>
        <!--        <div class="para1">-->
        <!--            <span class="text1">需求和影响</span>-->
        <!--        </div>-->
        <div class="device_left">
            <div class="line1"></div>
            <div class="line2"></div>
            <div class="line3"></div>
            <h3>免费冷</h3>
            <div class="content">
                <div class="left_content">
                    <img th:src="@{/img/water11.png}" alt="" style="height: 80px;width: 50px;">
                </div>
                <div class="right_content">
                    <div>
                        <label for="">转换率:</label>
                        <span>95%</span><br>
                    </div>
                    <div>
                        <label for="">每小时供能:</label>
                        <span>220Kwh</span><br>
                    </div>
                    <div>
                        <label for="">当前温度:</label>
                        <span>95%</span>
                    </div>

                </div>
            </div>
        </div>
        <div class="device_left">
            <div class="line7"></div>
            <div class="line8"></div>
            <div class="line9"></div>
            <!--            对应的内容-->
            <h3>地埋管</h3>
            <div class="content">
                <div class="left_content" style="margin-left:0px">
                    <img th:src="@{/img/pipe.png}" alt="" style="height: 80px;width: 80px;">
                </div>
                <div class="right_content" style="padding-left: 10px">
                    <div>
                        <label for="">转换率:</label>
                        <span>95%</span><br>
                    </div>
                    <div>
                        <label for="">每小时供能:</label>
                        <span>220Kwh</span><br>
                    </div>
                </div>
            </div>
        </div>
        <div class="device_left">
            <div class="line13"></div>
            <div class="line14"></div>
            <div class="line15"></div>
            <!--            对应的内容-->
            <h3>水蓄能</h3>
            <div class="content">
                <div class="left_content">
                    <img th:src="@{/img/water5.png}" alt="" style="height: 80px;width: 70px;">
                </div>
                <div class="right_content" style="padding-left: 10px">
                    <div>
                        <label for="">每小时供能:</label>
                        <span>220Kwh</span><br>
                    </div>
                    <div>
                        <label for="">水温:</label>
                        <span>22&#8451;</span><br>
                    </div>
                </div>
            </div>
        </div>
        <div class="device_left">
            <div class="line19"></div>
            <div class="line20"></div>
            <div class="line21"></div>
            <!--            对应的内容-->
            <h3>地源热泵</h3>
            <div class="content">
                <div class="left_content">
                    <img th:src="@{/img/hot.png}" alt="" style="height: 70px;width: 80px;">
                </div>
                <div class="right_content" style="padding-left: 0px">
                    <div>
                        <label for="">每小时供能:</label>
                        <span>220Kwh</span><br>
                    </div>
                    <div>
                        <label for="">地表温度:</label>
                        <span>22&#8451;</span><br>
                    </div>
                    <div>
                        <label for="">转化率:</label>
                        <span>95%</span><br>
                    </div>
                </div>
            </div>
        </div>
        <div class="left_img">
            <img th:src="@{/img/idea.png}" alt="" style="height: 300px;width: 300px;">
        </div>
    </div>
    <div class="middle_m">
        <!--        设备名开始-->
        <div class="labelImg1">
            <label>温度</label>
        </div>
        <div class="labelImg2">
            <label >免费冷</label>
        </div>
        <div class="labelImg3">
            <label >地源热泵B</label>
        </div>
        <div class="labelImg4">
            <label >地板</label>
        </div>
        <div class="labelImg5">
            <label >地埋管</label>
        </div>
        <div class="labelImg6">
            <label >新风机组</label>
        </div>
        <div class="labelImg7">
            <label >地源热泵A</label>
        </div>
        <div class="labelImg8">
            <label >湿度</label>
        </div>
        <div class="labelImg9">
            <label >水蓄能</label>
        </div>
        <!--        设备名结束-->
        <div class="notice">
            <div class="notice_content">
                <div style="background-color: #fff; border-radius: 50%"></div>
                <span>设备名</span>
            </div>
            <div class="notice_content">
                <div style="background-color: #135587;border-radius: 50%"></div>
                <span>关系名</span>
            </div>
        </div>
        <div class="middle_m_top">
            <div class="top_arrow">
                <img th:src="@{/img/arrow.png}" alt="" style="width: 60px;height: 75px;">
            </div>
            <div class="top_img">
                <img th:src="@{/img/need1.png}" alt="" style="width: 80px;height: 80px;">
            </div>
            <div class="middle_m_top_left">
                <div >
                    <label >预计费用:</label>
                    <span id="getPrice"></span><br>
                </div>
                <div>
                    <label >实际供冷面积:</label>
                    <span>1000</span>
                </div>
            </div>
            <div class="middle_m_top_right">
                <div >
                    <label >整体能源节约率:</label>
                    <span>80%</span><br>
                </div>
                <div>
                    <label >开启设备台数:</label>
                    <span>20</span>
                </div>
            </div>

        </div>
        <div class="middle_m_m" id="line_direction_chart" style="width: 650px;height: 480px;">
        </div>
        <div class="middle_m_bottom">
            <div class="bottom_arrow">
                <img th:src="@{/img/arrowIdea.png}" alt="">
            </div>
            <div class="lineImg">
                <img th:src="@{/img/line_02.png}" alt="">
            </div>
            <div class="lineImg1">
                <img th:src="@{/img/myline.png}" alt="">
            </div>
            <form action="" onsubmit="change();return false;">
                <div class="formTitle">
                    <h2>能源策略调控</h2>
                </div>

                <div class="temContent">
                    <label for="">温度:</label>
                    <input type="text" id="getTem">&#8451;
                </div>
                <div class="temContent">
                    <label for="">湿度:</label>
                    <input type="text" id="getHumidity">%
                </div>
                <div class="temContent">
                    <label for="">人数:</label>
                    <input type="text" id="peopleNumber">位
                </div>
                <div>
                    <input type="submit" value="采用策略">
                </div>
            </form>
        </div>
    </div>
    <div class="middle_right">
        <div class="triangle1"></div>
        <div class="para1">
            <span class="text1">需求和影响</span>
        </div>
        <div class="device_right">
            <!--            对应的线-->
            <div class="line4"></div>
            <div class="line5"></div>
            <div class="line6"></div>
            <h3>地板</h3>
            <div class="content">
                <div class="right_content">
                    <div>
                        <label for="">实时耗能:</label>
                        <span>220Kwh</span><br>
                    </div>
                    <div>
                        <label for="">实时温度:</label>
                        <span>22&#8451;</span><br>
                    </div>
                </div>
                <div class="left_content">
                    <img th:src="@{/img/floor2.png}" alt="" style="height: 70px;width: 80px;">
                </div>
            </div>
        </div>
        <div class="device_right">
            <div class="line10"></div>
            <div class="line11"></div>
            <div class="line12"></div>
            <h3>新风机组</h3>
            <div class="content">
                <div class="right_content">
                    <div>
                        <label for="">实时耗能:</label>
                        <span>220Kwh</span><br>
                    </div>
                    <div>
                        <label for="">实时功率:</label>
                        <span>22kw</span><br>
                    </div>
                </div>
                <div class="left_content" style="margin-left: 30px">
                    <img th:src="@{/img/air1.png}" alt="" style="height: 80px;width: 80px;">
                </div>
            </div>
        </div>
        <div class="device_right">
            <div class="line16"></div>
            <div class="line17"></div>
            <div class="line18"></div>
            <h3>温度</h3>
            <div class="content">
                <div class="right_content" style="margin-top: 25px;">
                    <div>
                        <label for="">当前温度:</label>
                        <span>22&#8451;</span><br>
                    </div>
                </div>
                <div class="left_content" style="margin-left: 70px;margin-top:5px">
                    <img th:src="@{/img/temperature.png}" alt="" style="height: 90px;width: 40px;">
                </div>
            </div>
        </div>
        <div class="device_right">
            <div class="line22"></div>
            <div class="line23"></div>
            <div class="line24"></div>
            <h3>湿度</h3>
            <div class="content">
                <div class="right_content" style="margin-top: 25px">
                    <div>
                        <label for="">当前湿度:</label>
                        <span>50%</span><br>
                    </div>
                </div>
                <div class="left_content" style="margin-left: 50px;margin-top:0px">
                    <img th:src="@{/img/humidity.png}" alt="" style="height: 90px;width: 75px;">
                </div>
            </div>
        </div>
        <div class="work">
            <div class="work_content">
                <div class="work_left">
                    <img th:src="@{/img/computer1.png}" alt="">
                </div>
                <div class="right">
                    <span>工况1</span><br>
                    <span>地埋管免费冷供应</span>
                </div>
            </div>
            <div class="work_content">
                <div class="work_left">
                    <img th:src="@{/img/computer1.png}" alt="">
                </div>
                <div class="right">
                    <span>工况19</span><br>
                    <span>暖电放水至卫生热水</span>
                </div>
            </div>
            <div class="work_content">
                <div class="work_left">
                    <img th:src="@{/img/computer1.png}" alt="">
                </div>
                <div class="right">
                    <span>工况22</span><br>
                    <span>新风机组开启</span>
                </div>
            </div>
        </div>
    </div>
</div>
<!--<head>-->
    <!--<meta charset="UTF-8">-->
    <!--<title>动线</title>-->
    <!--<link rel="stylesheet" href="css/idea.css">-->
    <!--<link rel="stylesheet" href="css/lines.css">-->
<!--</head>-->
<!--<body>-->
<!--<div class="top" >-->
    <!--<h2>安捷能源预测</h2>-->
<!--</div>-->
<!--<div class="content">-->
    <!--&lt;!&ndash;    图谱提示开始&ndash;&gt;-->
    <!--<div class="notice">-->
        <!--<div>-->
            <!--<div style="float: left ;width: 20px;height: 20px;background-color: #fff;border-radius: 50%"></div>-->
            <!--<span >设备名</span>-->
        <!--</div>-->
        <!--<div>-->
            <!--<div style="float: left; width: 20px;height: 20px;background-color: #155f92;border-radius: 50%"></div>-->
            <!--<span >关系名</span>-->
        <!--</div>-->
    <!--</div>-->
    <!--&lt;!&ndash;    图谱提示结束&ndash;&gt;-->
    <!--&lt;!&ndash;    图片标签开始&ndash;&gt;-->
    <!--<div>-->
        <!--<div class="labelImg1">-->
            <!--<label >温度</label>-->
        <!--</div>-->
        <!--<div class="labelImg2">-->
            <!--<label >免费冷</label>-->
        <!--</div>-->
        <!--<div class="labelImg3">-->
            <!--<label >地源热泵B</label>-->
        <!--</div>-->
        <!--<div class="labelImg4">-->
            <!--<label >地板</label>-->
        <!--</div>-->
        <!--<div class="labelImg5">-->
            <!--<label >地埋管</label>-->
        <!--</div>-->
        <!--<div class="labelImg6">-->
            <!--<label >新风机组</label>-->
        <!--</div>-->
        <!--<div class="labelImg7">-->
            <!--<label >地源热泵A</label>-->
        <!--</div>-->
        <!--<div class="labelImg8">-->
            <!--<label >湿度</label>-->
        <!--</div>-->
        <!--<div class="labelImg9">-->
            <!--<label >水蓄能</label>-->
        <!--</div>-->
    <!--</div>-->
    <!--&lt;!&ndash;    图片标签结束&ndash;&gt;-->
    <!--&lt;!&ndash;     线条开始&ndash;&gt;-->
    <!--<div>-->
        <!--<div class="line1"></div>-->
        <!--<div class="line2"></div>-->
        <!--<div class="line3"></div>-->
        <!--<div class="line4"></div>-->
        <!--<div class="line5"></div>-->
        <!--<div class="line6"></div>-->
        <!--<div class="line7"></div>-->
        <!--<div class="line8"></div>-->
        <!--<div class="line9"></div>-->
        <!--<div class="line10"></div>-->
        <!--<div class="line11"></div>-->
        <!--<div class="line12"></div>-->
        <!--<div class="line13"></div>-->
        <!--<div class="line14"></div>-->
        <!--<div class="line15"></div>-->
        <!--<div class="line16"></div>-->
        <!--<div class="line17"></div>-->
        <!--<div class="line18"></div>-->
        <!--<div class="line19"></div>-->
        <!--<div class="line20"></div>-->
        <!--<div class="line21"></div>-->
        <!--<div class="line22"></div>-->
        <!--<div class="line23"></div>-->
        <!--<div class="line24"></div>-->
    <!--</div>-->
    <!--&lt;!&ndash;    线条结束&ndash;&gt;-->
    <!--&lt;!&ndash;    蓝色箭头开始&ndash;&gt;-->
    <!--<div class="arrowImg"><img th:src="@{/img/arrow.png}" alt=""></div>-->
    <!--<div class="arrowImg1"><img th:src="@{/img/arrowIdea.png}" alt=""></div>-->
    <!--&lt;!&ndash;    蓝色箭头结束&ndash;&gt;-->
    <!--<div class="middleImg"><img th:src="@{/img/need1.png}" alt=""></div>-->
    <!--<div class="bottomImg"><img th:src="@{/img/idea.png}" alt=""></div>-->
    <!--&lt;!&ndash;    工况开始&ndash;&gt;-->
    <!--<div class="work">-->

        <!--<div>-->
            <!--<img th:src="@{/img/computer1.png}" alt="">-->
            <!--<div style="">-->
                <!--<span>工况1</span><br>-->
                <!--<span>地埋管免费冷供应</span><br>-->
            <!--</div>-->
        <!--</div>-->
        <!--<div>-->
            <!--<img th:src="@{/img/computer1.png}" alt="" style="top: 60px;">-->
            <!--<div>-->
                <!--<span>工况19</span><br>-->
                <!--<span>暖电放水至卫生热水</span><br>-->
            <!--</div>-->
        <!--</div>-->
        <!--<div>-->
            <!--<img th:src="@{/img/computer1.png}" alt="" style="top: 120px;">-->
            <!--<div>-->
                <!--<span>工况22</span><br>-->
                <!--<span>新风机组开启</span>-->
            <!--</div>-->
        <!--</div>-->

    <!--</div>-->
    <!--&lt;!&ndash;    工况结束&ndash;&gt;-->
    <!--<div class="triangle"></div>-->
    <!--<div class="triangle1"></div>-->
    <!--<div class="para">-->
        <!--<span class="text">供给侧</span>-->
    <!--</div>-->
    <!--<div class="para1">-->
        <!--<span class="text1">需求和影响</span>-->
    <!--</div>-->
    <!--&lt;!&ndash;     左侧内容开始&ndash;&gt;-->
    <!--<div class="left">-->
        <!--<div>-->
            <!--<p>免费冷</p>-->
            <!--<div class="temperatureImg"><img th:src="@{/img/water11.png}" style="width: 50px;height: 80px;margin-top: 20px" alt="" ></div>-->
            <!--<div class="temperature">-->
                <!--<div style="margin-top: -20px">-->
                    <!--<label >转化率:</label>-->
                    <!--<span>95%</span>-->
                <!--</div>-->
                <!--<div >-->
                    <!--<label >每小时供能:</label>-->
                    <!--<span>220kwh</span>-->
                <!--</div>-->
                <!--<div >-->
                    <!--<label >当前温度:</label>-->
                    <!--<span>22&#8451;</span>-->
                <!--</div>-->
            <!--</div>-->
        <!--</div>-->
        <!--<div>-->
            <!--<p>地埋管</p>-->
            <!--<div class="temperatureImg"><img th:src="@{/img/pipe.png}" alt=""  style="width: 80px; margin-left: -10px"></div>-->
            <!--<div class="temperature" style="margin-top:-20px">-->
                <!--<div style="margin-top: 20px">-->
                    <!--<label >转化率:</label>-->
                    <!--<span>95%</span>-->
                <!--</div>-->
                <!--<div style="margin-top: 10px">-->
                    <!--<label >每小时供能:</label>-->
                    <!--<span>300kwh</span>-->
                <!--</div>-->

            <!--</div>-->
        <!--</div>-->
        <!--<div>-->
            <!--<p>水蓄能</p>-->
            <!--<div class="temperatureImg"><img th:src="@{/img/water5.png}" alt=""  style="width: 70px"></div>-->
            <!--<div class="temperature">-->
                <!--<div>-->
                    <!--<label >每小时供能:</label>-->
                    <!--<span>1kwh</span><br>-->
                <!--</div>-->
                <!--<div>-->
                    <!--<label >水温:</label>-->
                    <!--<span>22&#8451;</span>-->
                <!--</div>-->

            <!--</div>-->
        <!--</div>-->
        <!--<div>-->
            <!--<p>地源热泵</p>-->
            <!--<div class="temperatureImg"><img th:src="@{/img/hot.png}" alt=""  style="width: 80px;height: 60px; margin-top: 20px"></div>-->
            <!--<div class="temperature">-->
                <!--<div style="margin-top: -10px">-->
                    <!--<label >每小时供能:</label>-->
                    <!--<span>1kwh</span><br>-->
                <!--</div>-->
                <!--<div>-->
                    <!--<label >地表温度:</label>-->
                    <!--<span>22&#8451;</span>-->
                <!--</div>-->
                <!--<div>-->
                    <!--<label >转化率:</label>-->
                    <!--<span>95%</span>-->
                <!--</div>-->

            <!--</div>-->
        <!--</div>-->
    <!--</div>-->
    <!--&lt;!&ndash;     左侧内容结束&ndash;&gt;-->
    <!--&lt;!&ndash;     右侧内容结束&ndash;&gt;-->
    <!--<div class="right">-->
        <!--<div>-->
            <!--<p>地板</p>-->
            <!--<div class="temperatureImg"><img th:src="@{/img/floor2.png}" alt="" ></div>-->
            <!--<div class="temperature">-->
                <!--<div style="margin-top: 30px">-->
                    <!--<label >实时耗能:</label>-->
                    <!--<span>22kwh</span>-->
                <!--</div>-->
                <!--<div >-->
                    <!--<label >实时温度:</label>-->
                    <!--<span>22&#8451;</span>-->
                <!--</div>-->
            <!--</div>-->
        <!--</div>-->
        <!--<div>-->
            <!--<p>新风机组</p>-->
            <!--<div class="temperatureImg"><img th:src="@{/img/air1.png}" alt=""  style="margin-right: -45px;margin-top:15px"></div>-->
            <!--<div class="temperature">-->
                <!--<div style="margin-top: 30px">-->
                    <!--<label >实时耗能:</label>-->
                    <!--<span>22kwh</span>-->
                <!--</div>-->
                <!--<div >-->
                    <!--<label >实时功率:</label>-->
                    <!--<span>22kw</span>-->
                <!--</div>-->
            <!--</div>-->
        <!--</div>-->
        <!--<div>-->
            <!--<p>温度</p>-->
            <!--<div class="temperatureImg"><img th:src="@{/img/temperature.png}" alt=""  style="width: 60px;height: 90px;" ></div>-->
            <!--<div class="temperature">-->
                <!--<div style="margin-top: 70px">-->
                    <!--<label >当前温度:</label>-->
                    <!--<span>22&#8451;</span>-->
                <!--</div>-->
            <!--</div>-->
        <!--</div>-->
        <!--<div>-->
            <!--<p>湿度</p>-->
            <!--<div class="temperatureImg"><img th:src="@{/img/humidity.png}" alt="" style="margin-right:-20px;width: 90px;height: 100px;" ></div>-->
            <!--<div class="temperature">-->
                <!--<div style="margin-top: 60px">-->
                    <!--<label >当前湿度:</label>-->
                    <!--<span>22&#8451;</span>-->
                <!--</div>-->

            <!--</div>-->
        <!--</div>-->
    <!--</div>-->
    <!--&lt;!&ndash;     右侧内容结束&ndash;&gt;-->
    <!--&lt;!&ndash;    中间上部分内容  显示用电量 开始&ndash;&gt;-->
    <!--<div class="middle_top">-->
        <!--<div style="margin-top: 15px">-->
            <!--<label>整体能源节约率:</label>-->
            <!--<span>80%</span>-->
        <!--</div>-->
        <!--<div style="margin-top: 15px;margin-left: 10px">-->
            <!--<label>累计费用:</label>-->
            <!--<span>1W</span>-->
        <!--</div>-->
        <!--<div style="margin-right: 28px">-->
            <!--<label>开启设备总台数:</label>-->
            <!--<span>10</span>-->
        <!--</div>-->
        <!--<div style="margin-left: 10px">-->
            <!--<label>实际供冷面积:</label>-->
            <!--<span>1000</span>-->
        <!--</div>-->
    <!--</div>-->
    <!--&lt;!&ndash;    中间上部分内容  显示用电量 结束&ndash;&gt;-->
    <!--<div class="middle" style="width: 650px;height: 480px;" id="line_direction_chart">-->
    <!--</div>-->
    <!--<div class="bottom" >-->
        <!--<div class="lineImg">-->
            <!--<img th:src="@{/img/line_02.png}" alt="">-->
        <!--</div>-->
        <!--<form action="" onsubmit="change();return false;">-->
            <!--<div class="formTitle">-->
                <!--<h2>能源策略调控</h2>-->
            <!--</div>-->

            <!--<div class="temContent">-->
                <!--<label for="">温度:</label>-->
                <!--<input type="text" id="getTem">&#8451;-->
            <!--</div>-->
            <!--<div class="temContent">-->
                <!--<label for="">湿度:</label>-->
                <!--<input type="text" id="getHumidity">hPa-->
            <!--</div>-->
            <!--<div>-->
                <!--<input type="submit" value="采用策略">-->
            <!--</div>-->
        <!--</form>-->
    <!--</div>-->
<!--</div>-->

<!--<input type="button" value="采用策略" onclick="myIdea()">-->
<script th:src="@{/js/jquery-1.9.1.min.js}"></script>
<script th:src="@{/js/echarts.min.js}"></script>
<script th:src="@{/js/chart.js}"></script>
<script th:src="@{/layer/layer.js}"></script>
<script>
    $(function(){
        change0();
    })

</script>
</body>
</html>
